<template>
  <div class="home">
    <!-- 头部标题 -->
    <Header/>

    <!-- 主要内容：二级路由出口 -->
    <div class="home-container">
      <router-view :workInfo="workInfo" :orderInfo="orderInfo"></router-view>
    </div>

    <!-- 底部导航 -->
    <FooterNav/>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: 'Home',
  computed: {
    ...mapState({
      workInfo: (state) => state.home.workInfo || {},
      orderInfo: (state) => state.home.orderInfo || [],
    }),
  }
}
</script>

<style scoped>
  .home {
    width: 100vw;
    height: 100vh;
  }
  /* 头部标题 */
  .home .home-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 6.6vh;
    background-color: #1B82D2;
  }
  .home .home-header-tt {
    font-size: 3vh;
    font-weight: 400;
    color: #fff;
  }

  .home .home-container {
    box-sizing: border-box;
    width: 100vw;
    height: 83vh;
    padding-top: 1.6vh;
    background-color: #F6F7FB;
  }
</style>